<template>
  <div class="cv-service">
    <div class="service-header">
      <div class="container">
        <h1>计算机视觉</h1>
        <p class="subtitle">智能视觉识别与分析解决方案</p>
      </div>
    </div>

    <div class="service-content">
      <div class="container">
        <section class="features">
          <h2>核心功能</h2>
          <div class="features-grid">
            <div class="feature-card" v-for="feature in features" :key="feature.title">
              <i :class="feature.icon"></i>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </section>

        <section class="use-cases">
          <h2>应用场景</h2>
          <div class="cases-grid">
            <div class="case-card" v-for="useCase in useCases" :key="useCase.title">
              <div class="case-icon">
                <i :class="useCase.icon"></i>
              </div>
              <div class="case-content">
                <h3>{{ useCase.title }}</h3>
                <p>{{ useCase.description }}</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const features = ref([
  {
    icon: 'fas fa-eye',
    title: '图像识别',
    description: '基于深度学习的图像识别系统，支持物体检测、场景分类等功能'
  },
  {
    icon: 'fas fa-video',
    title: '视频分析',
    description: '实时视频流分析，支持目标跟踪、行为识别等高级功能'
  },
  {
    icon: 'fas fa-fingerprint',
    title: '生物识别',
    description: '人脸识别、指纹识别等生物特征识别技术'
  },
  {
    icon: 'fas fa-camera',
    title: '场景重建',
    description: '3D场景重建、深度估计、全景图像生成'
  }
])

const useCases = ref([
  {
    icon: 'fas fa-industry',
    title: '工业检测',
    description: '产品质量检测、缺陷识别、生产线监控'
  },
  {
    icon: 'fas fa-shield-alt',
    title: '安防监控',
    description: '智能监控系统、异常行为检测、人流量统计'
  },
  {
    icon: 'fas fa-shopping-cart',
    title: '零售分析',
    description: '商品识别、客流分析、货架管理'
  },
  {
    icon: 'fas fa-car',
    title: '智能驾驶',
    description: '车道线检测、障碍物识别、自动泊车辅助'
  }
])
</script>

<style scoped lang="scss">
// 复用 NLP.vue 的样式，只需修改颜色和图标
.cv-service {
  .service-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 80px 0;
    color: white;
    text-align: center;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }

  // ... 其他样式与 NLP.vue 相同
}
</style> 